<template>
  <detail-card ref="card">
    <template v-slot:main>
      <base-card ref="base" :id="$route.params.id"/>
<!--      <post-card ref="role" :user-id="$route.params.id"/>-->
    </template>
    <template v-slot:nav>
      <div :class="['nav-item', navIndex === 1 ? 'is-active' : '']" @click="handleNav(1)">
        <span>基本信息</span>
      </div>
      <div :class="['nav-item', navIndex === 2 ? 'is-active' : '']" @click="handleNav(2)">
        <span>角色信息</span>
      </div>
    </template>
  </detail-card>
</template>
<script>
import BaseCard from "./components/BaseCard.vue";

export default {
  name: "UserDetail",
  components: {BaseCard, },
  data() {
    return {
      navIndex: 1,
      baseUrl: '/system/user',
    };
  },
  created() {

  },
  methods: {
    handleNav(index) {
      if (this.navIndex === index) return
      this.navIndex = index
      let h = 0
      switch (index) {
        case 1:
          h = this.$refs.base.$el.offsetTop
          break
        case 2:
          h = this.$refs.role.$el.offsetTop
          break
        default:
          break
      }
      this.$refs.card.scroll(h)
    },
  }
};
</script>
<style lang="scss" scoped>
</style>
